// 编辑单个字段页面

import './index.less';
import {Input, Text, View} from "@tarojs/components";
import {useEffect, useState} from "react";
import {utils} from "../../utils/utils";
import {wxActions} from "../../utils/wxActions";
import {Api} from "../../api/api";
import {connect} from "react-redux";

function UpdateInfo(props) {
    const {dispatch} = props;
    const [title, setTitle] = useState("");
    const [value, setValue] = useState("");
    const [placeholder, setPlaceholder] = useState("");
    const [typeId, setTypeId] = useState("");
    const [isProcessing, setIsProcessing] = useState(false); // 是否正在处理中

    useEffect(() => {
        setTitle(wxActions.getCurrentPageParams('title'))
        setValue(wxActions.getCurrentPageParams('value'))
        setPlaceholder(wxActions.getCurrentPageParams('placeholder'))
        setTypeId(wxActions.getCurrentPageParams('typeId'))
    }, []);

    const handleInput = (e) => {
        setValue(e.detail.value);
    }

    // 确认修改
    const handleEdit = () => {
        if (isProcessing) {
            return; // 正在处理点击事件，返回
        }
        setIsProcessing(true); // 设置状态变量为true，表示正在处理点击事件
        let data = {}
        switch (typeId) {
            case "1": // 用户名
                data = {nickName: value};
                break;
            case "2": // 手机号
                if (!utils.isPhoneNumber(value)) {
                    wxActions.showTip("请输入正确的手机号");
                    return;
                }
                data = {phonenumber: value};
                break;
            case "3": // 电子邮箱
                if (!utils.isEmail(value)) {
                    wxActions.showTip("请输入正确的电子邮箱");
                    return;
                }
                data = {email: value};
                break;
            default:
                break;
        }
        Api.editUser(data).then(res => {
            wxActions.refreshUserInfo(dispatch); // 刷新用户信息
            wxActions.showSuccessWithBack("修改成功");
        }).catch(err => {
            wxActions.showTip(err.message);
            setIsProcessing(false); // 异步操作完成后，设置状态变量为false
        }).finally(() => {
            //setIsProcessing(false); // 异步操作完成后，设置状态变量为false
        })
    }

    return (
        <View className='updateInfo'>
            <View className={"editItem"}>
                <View className={"title"}>
                    <Text>{title}</Text>
                </View>
                <View className={"inputRow"}>
                    <Input
                        className={"input"}
                        type={"text"}
                        value={value}
                        placeholder={placeholder}
                        placeholderClass={"placeholder"}
                        onInput={handleInput}
                    />
                </View>
                 <View className={"editItem_divider"}/>
            </View>
            <View className={"btnRow"}>
                <View className={"btn"} onClick={handleEdit}>
                    <Text>确认修改</Text>
                </View>
            </View>
        </View>
    )
}

const mapStateToProps = (state) => ({
    reduxUserInfo: state.userState.reduxUserInfo
})

export default connect(mapStateToProps)(UpdateInfo);
